<template>
  <div class="goods">
    <title-view class="good_title" :item="item"></title-view>
    <div class="good_banner" v-if="item.wheelSeedingList.length > 0">
      <home-swiper
        :imgurl="item.wheelSeedingList.map((item) => item.imgUrl)"
      ></home-swiper>
    </div>
    <div class="good_pic">
      <pic-view :platePicList="item.platePicList"></pic-view>
    </div>
    <div class="good_item">
      <item-view
        v-for="i in item.goodsList"
        :key="i.id"
        :good="i"
        @click="skip(i.goodsId)"
      ></item-view>
    </div>
  </div>
</template>

<script>
import TitleView from './title.vue'
import ItemView from './item.vue'
import homeSwiper from './swiper.vue'
import picView from './pic.vue'
export default {
  props: ['item'],
  components: {
    TitleView,
    ItemView,
    homeSwiper,
    picView
  },
  methods: {
    skip(id) {
      console.log(id)
      this.$router.push({
        path: '/good',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods {
  display: flex;
  flex-direction: column;
  // border: 1px solid #000;
}
.goods .good_title {
  // border: 1px solid #000;
}

.goods .good_banner {
  // border: 1px solid #000;
}

.goods .good_pic {
  // border: 1px solid #ff0000;
}

.goods .good_item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // align-items: flex-start;
  gap: 10px;
  margin: 20px auto;
}
.goods .good_item:hover {
}
</style>
